
import { ElButton } from 'element-plus'
import { editorBlockSelectProp, editorBlockColorProp, editorBlockInputProp } from '../../utils/registerComponentTool'

export default {
  label: '按钮',
  preview: () => <ElButton >预览按钮</ElButton>,
  render: ({ props, size }) => <ElButton style={{ width: `${size.width}px`, height: `${size.height}px` }} type={props.type} size={props.size}>{props.text || '我是按钮'}</ElButton>,
  key: 'button',
  resize: { // 可以更改拉伸文本框的宽度
    width: true,
    height: true
  },
  props: {
    text: editorBlockInputProp('按钮内容'),
    type: editorBlockSelectProp('按钮大小', [
      { label: '基础', value: 'primary' },
      { label: '成功', value: 'success' },
      { label: '警告', value: 'warning' },
      { label: '危险', value: 'danger' },
      { label: '文本', value: 'text' },
    ]),
    size: editorBlockSelectProp('按钮大小', [
      { label: '默认', value: '' },
      { label: '中等', value: 'medium' },
      { label: '小', value: 'small' },
      { label: '极小', value: 'mini' },
    ])
  }
}